import { Canvas, DocsContainer, Meta, Story } from '@storybook/blocks';
import * as ButtonStories from './button.stories';

<Meta of={ButtonStories} />

<style>
  {`
    cv-button {
      margin-right: 8px;
    }
    .docs-story div:first-of-type {
      text-align: center;
    }
    #story--example-button--outlined,
    #story--example-button--text {
      margin-right: 8px;
    }
    cv-button[outlined].destructive {
      margin-right: 4rem;
    }
    `}
</style>

# Buttons

## Basics

- Each page can have only one primary action button
- It is common and okay for some pages to have no primary action
- Include an icon in your button only in specific circumstances

<Canvas>
  <cv-button label="Text button" />

{' '}
<cv-button label="Outlined button" outlined />

  <cv-button label="Contained button" raised />
</Canvas>

---

## Anatomy

Buttons contain a text label and optional icon.

<Canvas>
  <cv-button id="no-icon" raised label="No icon" />

{' '}
<cv-button id="left-icon" raised label="Left icon" icon="sailing" />

  <cv-button id="right-icon" raised label="Right icon" icon="sailing" trailingIcon="true" />
</Canvas>

### Spacing

Separate all buttons with an 8px gap.

<Canvas>
  <cv-button outlined label="Button" />

{' '}
<cv-button outlined label="Button" />

  <cv-button outlined label="Button" />
</Canvas>

---

## Placement

Place the primary action to the right, followed by secondary actions.

#### Sequence

1. Primary action button (if any)

   Many pages will not have primary actions. This is OK.

2. Secondary action buttons

3. Lesser functions as icon buttons

<Canvas>
  <cv-button outlined label="Button" />

{' '}
<cv-button outlined label="Button" />

  <cv-button raised label="Primary" class="primary accent" />
</Canvas>

### In footers

In footers (such as card, dialog, page, or sheet footers) align all buttons to the right, but place destructive actions to the left to minimize accidental clicks.

<Canvas>
  <cv-button outlined label="Delete" class="destructive" />

{' '}
<cv-button outlined label="Button" />

  <cv-button raised label="Primary" class="primary accent" />
</Canvas>

---

## Styling

Use “default” outline buttons for everything except the primary action (if any).

<Canvas>
  <cv-button outlined label="Button" />

  <cv-button outlined label="Button" />
</Canvas>

### Primary action

If the page has a primary action, use an “accent” contained button.

<Canvas>
  <cv-button outlined label="Button" />

{' '}
<cv-button outlined label="Button" />

  <cv-button raised label="Primary" class="primary accent" />
</Canvas>

### Destructive action

#### When the primary action is destructive

If the primary action is a destructive one (for example, it deletes some data), then it uses the negative color.

<Canvas>
  <form>
    <cv-button outlined label="Button" />

    <cv-button outlined label="Button" />

    <cv-button raised label="Delete" color="negative" />

  </form>
</Canvas>

#### When the destructive action is not the primary action

If the destructive action is not the primary action, do not use the negative color. This calls extra attention to it, and we want the focus to remain on the primary action.

<Canvas>
  <cv-button outlined label="Delete" class="destructive" />

{' '}
<cv-button outlined label="Button" />

  <cv-button raised label="Primary" />
</Canvas>
